<template>
  <div id="ValidCode" @click="generateCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getRandomStyles()">{{ item }}</span>
  </div>
</template>

<style scoped lang="less">
@import "./ValidCode.less";
</style>

<script setup>
import { ref, computed, watchEffect } from 'vue';

// 安全的字符集，去除了容易混淆的字符
const code = ref('23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz');

// 循环遍历生成四位验证码
const codeList = ref([]);

// 生成四位验证码
function generateCode() {
  const arr = [];
  for (let i = 0; i < 4; i++) {
    let index = getRandomIndex();
    arr.push(code.value[index]);
  }
  codeList.value = arr;
}

// 生成随机索引
function getRandomIndex() {
  return Math.floor(Math.random() * code.value.length);
}
// 获取随机样式
function getRandomStyles() {
  const x = Math.floor(Math.random() * 10) - 5; // -5 到 5
  const y = Math.floor(Math.random() * 10) - 5; // -5 到 5
  const rotate = Math.random() * 10 - 5; // -5 到 5
  return {
    transform: `translate(${x}px, ${y}px) rotate(${rotate}deg)`
  };
}
// 定义emit
const emit = defineEmits(['update:modelValue']);

// 监听codeList的变化，并更新父组件
watchEffect(() => {
  emit('update:modelValue', codeList.value.join(''));
});

// 初始化验证码
generateCode();
</script>
